<template>
  <div class="m-m">
      <div class="m-m-title">消息中心</div>
      <div>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane name="first">
            <template #label>
              <el-badge :is-dot="isDot" class="item">
                <span>我的消息</span>
              </el-badge>
            </template>
            <div class="m-im">
              <div class="m-im-s">
                <el-scrollbar>
                  <div :class="activeMemberId == item.id ? 'm-m-l active' : 'm-m-l'" style="width: 230px;"
                       v-for="item in messageMemberList" @click="showMessagePanel(item.id,memberId,item.avatar)">
                    <el-avatar style="width: 20%" :src="item.avatar ? item.avatar : avatarUrl"></el-avatar>
                    <span >{{item.username}}</span>
                  </div>
                </el-scrollbar>
              </div>
              <div class="m-im-c">
                <el-scrollbar>
                  <div v-for="item in messageData">
                    <div style="text-align: center;color: #a6a4a4">{{item.createTime}}</div>
                    <div style="display: flex;margin-top: 20px">
                      <div style="width: 10%">
                        <div style="display: flex;align-items: center;flex-direction: column;">
                          <el-avatar size='large' :src="avatarCurrent ? avatarCurrent : avatarUrl"></el-avatar>
                        </div>
                      </div>
                      <div style="width: 90%">
                        <p>{{ item.content }}</p>
                      </div>
                    </div>
                  </div>
                </el-scrollbar>
              </div>
            </div>
          </el-tab-pane>
<!--          <el-tab-pane label="Config" name="second">Config</el-tab-pane>
          <el-tab-pane label="Role" name="third">Role</el-tab-pane>
          <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>-->
        </el-tabs>
      </div>
  </div>
</template>
<script setup lang="ts">
import type { TabsPaneContext } from 'element-plus'
import {onMounted, ref} from "vue";
import {messageList, messageMembers} from "@/api/message.ts";
import storage from "@/utils/storage.ts";
import router from "@/router";
import avatarUrl from '@/assets/default.png'

const activeName = ref('first')
const isDot = ref(true)
const content = ref('');
const messageData = ref([])
const messageMemberList = ref([])
const memberId = ref(0)
const avatarCurrent = ref('')
const activeMemberId = ref(0)
const user = ref({})
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const showMessagePanel = (from: number,to: number,avatar: string) => {
  avatarCurrent.value = avatar
  activeMemberId.value = from
  messageList(from,to).then((resp)=>{
    messageData.value = resp.data
  })
}
const getMessageMembers = (memberId:number) => {
  messageMembers({memberId: memberId}).then((res) => {
    messageMemberList.value = res.data
  })
}
onMounted(()=>{
  const user = JSON.parse(storage.getItem("userInfo"))
  memberId.value = router.currentRoute.value.query.uid | user.id;
  getMessageMembers(memberId.value)

  /*let tmp = JSON.parse(storage.getItem("userInfo"))
  if(tmp) {
    user.value = JSON.parse(storage.getItem("userInfo"))
    isLogin.value = storage.getItem('userInfo') != null
        && JSON.parse(storage.getItem('userInfo')) && JSON.parse(storage.getItem('userInfo')).id != null
  }*/
})
</script>
<style scoped>
  .m-m{
    width: 100%;
    color: #222222;
    display: flex;
    padding-left: 30px;
    padding-top: 30px;
    flex-direction: column;
  }
  .m-m-title {
    font-size: 20px;
    font-weight: bold;
  }
  .m-im {
    display: flex;
  }
  .m-im-s {
    width: 18%;
    height: 600px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #cccccc;
  }
  .m-im-s div{
    display:flex;
    padding:10px 10px 10px 0;
    border-bottom: 1px solid #ccc;
  }
  .m-im-h:hover{
    background-color: #dad7d7;
    cursor: pointer;
  }
  .m-im-u{
      width: 75%;
      height: 40px;line-height: 40px;margin-left: 10px;
      overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
    }
  .m-im-c {
    width: 82%;
    height: 600px;
    display: flex;
    flex-direction: column;
  }
  p {
    word-wrap: break-word;
    word-break: break-all;
  }
  .m-m-l {
    width: 150px;
  }
  .m-m-l:hover {
    cursor: pointer;
    background-color: #b3afaf;
  }
  .active {
    background-color: #b3afaf;
  }
</style>